<template>
	<view>
		<view class="login">
			<view class="login-text">
				<text>用户登录</text>
			</view>
			<view class="login-avatar">
				<input class="login-input" type="text" placeholder="用户名" @input="inputChages" id="user" />
				<view class="login-disly">
					<input v-if="isPwd" class="login-input" type="password" placeholder="密码" @input="inputChages"
						id="password" />
					<input v-else class="login-input" type="text" placeholder="密码" @input="inputChages" id="password" />
					<text :class="isPwd ? 'iconfont icon-yanjing_yincang_o icon' : 'iconfont icon-yanjing icon'"
						@click="clickChages"></text>
				</view>
			</view>
			<view class="login-nav">
				<navigator url="../register/register">注册新用户</navigator>
			</view>
			<view class="login-login" @tap="tapLogin">
				<text class="login-login-text">登录</text>
			</view>
		</view>
	</view>
</template>

<script>
    import {request} from "../../utlls/request.js";
	export default {
		data() {
			return {
				isPwd: true,
				user: '',
				password: '',
			}
		},
		onLoad() {

		},
		methods: {
			clickChages() {
				this.isPwd = !this.isPwd
			},
			inputChages(e) {
				let prop = e.target.id
				this[`${prop}`] = e.detail.value
			},
			tapLogin() {
				if (!this.checkValid()) {
					return false
				}
				let data = {
					username: this.user,
					password: this.password
				}
				let url = this.$params.host + this.$params.login_user
				uni.request({
					url: url,
					method: 'POST',
					data: data,
					success: (res) => {
						let data = res.data.data
						let message = res.data.message
						uni.showToast({
							title: message,
							icon: 'none',
						})
						if (message == '操作成功') {
							uni.$emit('getSunc', data)
							uni.navigateTo({
								url: "../index/index"
							})
						}
					}
				})
			},
			checkValid() {
				if (this.user.length == 0) {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					})
					return false
				}
				if (this.password.length == 0) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return false
				}
				return true
			}

		}
	}
</script>

<style>
	@import url("login.css");
</style>
